<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>头像上传</title>

    <link href="../yhzx/css/bootstrap.css" rel="stylesheet">
    <link href="../yhzx/css/login.css" rel="stylesheet">

    <style>
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            background-color: #f9f9fb;
        }
        
        #container {
            position: absolute;
            left: 40px;
            top: 60px;
        }
        
        p {
            font-size: 1.2rem;
            margin-top: 8px;
        }
        
        #wrapper {
            position: relative;
        }
        
        #cropper {
            position: absolute;
            border: 1px solid #ccc;
        }
        
        #previewContainer {
            position: absolute;
            left: 350px;
        }
        
        .preview {
            border: 1px solid #ccc;
        }
        
        #selectBtn {
            position: absolute;
            width: 135px;
            height: 32px;
            background: url(img/select-pic.png) no-repeat left #0080C0;
            border-radius: 2px;
            color: rgba(255, 255, 255, .9);
            text-indent: 40px;
            line-height: 32px;
            font-size: 1.4rem;
            white-space: 10px;
        }
        
        #saveBtn {
            position: absolute;
            left: 170px;
            width: 70px;
            height: 32px;
            background-color: #0080c0;
            line-height: 32px;
            font-size: 1.4rem;
            white-space: 10px;
            text-align: center;
            color: rgba(255, 255, 255, .9);
            border-radius: 2px;
        }
        
        #selectBtn:hover,
        #selectBtn:focus,
        #saveBtn:hover,
        #saveBtn:focus {
            background-color: #3c78b0;
            color: #FFF;
        }
        
        #rotateLeftBtn {
            position: absolute;
            left: 0px;
            top: 306px;
            width: 100px;
            height: 22px;
            padding-left: 25px;
            padding-top: 2px;
            background: url(img/left.png) no-repeat;
        }
        
        #rotateRightBtn {
            position: absolute;
            left: 202px;
            top: 306px;
            width: 98px;
            height: 22px;
            padding-right: 25px;
            padding-top: 2px;
            background: url(img/right.png) no-repeat right;
        }
    </style>

    <script type="text/javascript" src="js/ImageCropper.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="/UcConfig/uca/GlobalParams.js"></script>
    <script type="text/javascript" src="../js/jquery-extention.js"></script>
    <script type="text/javascript" src="../js/json3.min.js"></script>
    <script type="text/javascript">
        var cropper;

        function init() {
            cropper = new ImageCropper(300, 300, 180, 180);
            cropper.setCanvas("cropper");
            cropper.addPreview("preview160");
            cropper.addPreview("preview50");

            if (!cropper.isAvaiable()) {
                alert("你的浏览器版本太旧，无法支持头像插件，请更新至最新版本！！");
            }
        }

        function selectImage(fileList) {
            cropper.loadImage(fileList[0]);
        }

        function rotateImage(e) {
            switch (e.target.id) {
                case "rotateLeftBtn":
                    cropper.rotate(-90);
                    break;
                case "rotateRightBtn":
                    cropper.rotate(90);
                    break;
            }
        }

        function saveImage() {
            var imgData = document.getElementById("preview160");

            // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
            imgData = imgData.toDataURL().split(',')[1];
            imgData = window.atob(imgData);
            var ia = new Uint8Array(imgData.length);
            for (var i = 0; i < imgData.length; i++) {
                ia[i] = imgData.charCodeAt(i);
            };

            // canvas.toDataURL 返回的默认格式就是 image/png
            var blob = new Blob([ia], {
                type: "image/png"
            });

            var formData = new FormData();

            formData.append('fileUpload', blob);
            formData.append('portraitName', $.getUrlParam('portraitName'));

            jQuery.ajax({
                url: BASE_PATH + "rs/uploadHeadPortrait",
                    type: 'POST',
                    data:  formData,
                    mimeType: "multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData: false,
                //返回值
                success: function(data) {
                	
                    data = JSON3.parse(data);

                    if (data['success']) {
                    	location.replace(document.referrer);
                    } else {
                        alert(data['message']);
                    }

                },

                statusCode: {
                    401: function() {
                        window.location.href = BASE_PATH + 'WEB-INF/jsp/401.jsp';
                    },
                    404: function() {
                        window.location.href = BASE_PATH + 'WEB-INF/jsp/404.jsp';
                    },
                    500: function() {
                        window.location.href = BASE_PATH + 'WEB-INF/jsp/500.jsp';
                    }
                }
            });
        }

        function trace() {
            if (typeof(console) != "undefined") console.log(Array.prototype.slice.apply(arguments).join(" "));
        };
    </script>

    <body onLoad="init();" ginger_software_stylesheet="true" ginger_software_doc="true">

        <div class="">
            <div class="">
                <ol class="breadcrumb lj">
                    <li><a><i class="glyphicon glyphicon-home"></i></a></li>
                    <li><a href="../../grxx.jsp"><i class="icon-pic"></i>个人信息</a></li>
                    <li>修改头像</li>
                </ol>
            </div>
        </div>

        <div id="container">
            <a id="selectBtn" href="javascript:void(0);" onClick="document.getElementById(&#39;input&#39;).click();">上传本地图片</a>
            <a id="saveBtn" href="javascript:void(0);" onClick="saveImage();">保 存</a>
            <input type="file" id="input" size="10" style="visibility:hidden;" onChange="selectImage(this.files)" accept="image/*">

            <div class="clear">
                <p></p>
            </div>
            <p>仅支持JPG、GIF、PNG图片文件，且文件小与5M</p>

            <div id="wrapper">
                <canvas id="cropper" width="300" height="300"></canvas>
                <a id="rotateLeftBtn" href="javascript:void(0);" onClick="rotateImage(event);">向左转</a>
                <a id="rotateRightBtn" href="javascript:void(0);" onClick="rotateImage(event);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向右转</a>

                <div id="previewContainer">
                    <canvas id="preview160" width="160" height="160" class="preview"></canvas>
                    <span style="display:block;width:100%;padding-top:5px;text-align:center;">大:160x160</span>

                    <canvas id="preview50" width="50" height="50" style="position:absolute;left:50px;top:220px;" class="preview"></canvas>
                    <span style="position:absolute;left:45px;top:280px;width:70px;text-align:center;">小:50x50</span>
                </div>
            </div>

        </div>

    </body>

</html>